<template>
    <div>
        <!--<Row type="flex" justify="start">
            <Col span="3">
                <Button type="default" long @click="backAction">返回列表</Button>
            </Col>
        </Row>-->
        <Alert class="alert">
            <h3>当前机构全宗号为：<span style="margin-left: 10px">{{rn}}</span></h3>
            <Divider/>
            <h4 style="color: #f1ae1b"> 注意：全宗号请勿使用"-"，系统将默认替换为"_"</h4>
        </Alert>
        <br>
        <Row type="flex" justify="center">
            <Col span="12">
                <Form :model="formData" inline>
                    <FormItem>
                        <Input type="text" clearable placeholder="请输入全宗号"
                               v-model="formData.record_number">
                            <span slot="prepend">全宗号</span>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button :loading="btnLoading" type="success" @click="submitAction">保存</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
        <Modal :title="'温馨提示'" v-model="modalShow" :width="400" :mask-closable="false" :closable="false">
            <div class="modal-content">操作成功，请重新登录！</div>
            <div slot="footer">
                <Button long type="default" @click="modalSubmit">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import { updateRecordNumber } from '@/api/record'
export default {
  data () {
    return {
      formData: {},
      rn: '无',
      btnLoading: false,
      modalShow: false
    }
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    backAction () {
      // if (this.$route.query) {
      this.$router.push({ name: 'recordList' })
      // }
    },
    submitAction () {
      if (!this.formData.record_number) {
        this.$Message.error('全宗号不能为空！')
        return false
      }
      this.btnLoading = true
      // 数据处理
      this.formData.record_number = this.formData.record_number.toString().trim().replace(/-/g, '_')
      updateRecordNumber(this.formData).then(res => {
        if (res.data.errcode === 0) {
          this.btnLoading = false
          this.modalShow = true
        } else if (res.data.errcode === 1105) {
          this.btnLoading = false
          this.$Modal.warning({
            title: '提示',
            content: '本机构全宗号已设置，不可修改!'
          })
        } else {
          this.btnLoading = false
          this.$Message.error(res.data.errmsg)
        }
      })
    },
    modalSubmit () {
      this.logout()
    }
  },
  mounted () {
    this.rn = window.localStorage.getItem('record_number')
  }
}
</script>

<style scoped>
    .modal-content {
        padding: 20px 10px 5px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        color: #de0000;
    }
    .alert {
        padding: 15px 30px;
    }
    /deep/.ivu-divider-horizontal {
        margin: 12px 0;
    }
</style>
